<!DOCTYPE html>
<html>

<head>
    <link rel="icon" href="images/拉黑小怪兽.png">
    <style>
        .container {
            background: url("./images/1.jpeg");
            background-size: cover;
            background-color: rgba(255, 255, 255, 0.1);
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        input[type="password"]::-ms-reveal {
            display: none;
            background-color: white;
        }

        .password-input input::placeholder {
            color: white;
            /* 设置文本颜色为红色 */
        }

        .contest {
            margin: 0px;
            border: 0px;
            padding: 0px;
            color: white;
            font-size: 10px;
            position: relative;
            left: -50px;
            height: 10px;
        }

        #usercon {
            left: -45px;
        }

        #pcon1 {
            left: -35px;
        }

        #pcon2 {
            left: -45px;
        }

        .show {
            display: block;
        }

        .x {
            cursor: pointer;
        }

        .hand {
            cursor: default;
        }

        /*****增加部分******/
        /*眼睛位置定义*/
        #bigBox .inputBox img[id="eye"] {
            position: relative;
            right: -100px;
            bottom: 105px;
            width: 20px;
            height: 15px;
            /* 把鼠标的样式换成小手 */
            cursor: pointer;
        }

        #bigBox .inputBox img[id="re-eye"] {
            position: relative;
            right: -75px;
            bottom: 35px;
            width: 20px;
            height: 15px;
            /* 把鼠标的样式换成小手 */
            cursor: pointer;
        }
    </style>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/x.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
    <title>注册界面</title>
</head>

<body class="container">
    <div id="bigBox">
        <h1>注 册</h1>
        <form url="http:/localhost:7777/user/register" method="post">
            <div class="inputBox">
                <div class="inputText password-input">
                    <span class="iconfont icon-nickname">
                        <img src="images/昵称.svg" alt="nickname" width="14px">
                    </span>
                    <input id="nicheng" type="text" name="nickname" placeholder="昵称" />
                </div>
                <p id="nicon" class="contest"></p>
                <div class="inputText password-input">
                    <span class="iconfont icon-username"></span>
                    <input id="user" type="text" name="username" placeholder="用户名" />
                    <p id="usercon" class="contest"></p>
                </div>
                <div class="inputText password-input">
                    <span class="iconfont icon-mail"></span>
                    <input id="email" type="text" name="email" placeholder="邮箱" />
                    <p id="emailcon" class="contest"></p>
                </div>
                <div div class="inputText password-input">
                    <span span span class="iconfont icon-visible"></span>
                    <input id="p1" type="password" name="password" placeholder="密码" />
                    <p id="pcon1" class="contest"></p>
                    <!-- <p id="pcon3" class="contest"></p> -->
                </div>
                <div class="inputText password-input">
                    <span class="iconfont icon-visible"></span>
                    <input id="p2" type="password" placeholder="再次输入密码" />
                    <p id="pcon2" class="contest"></p>
                </div>
                <img src="images/闭眼睛 .png" id="eye"> <!--这是眼睛-->
                <img src="images/闭眼睛 .png" id="re-eye"> <!--这是确认密码的眼睛-->
                <!--这是眼睛的js实现-->
                <script>
                    var password = document.getElementById("p1");
                    var eye = document.getElementById("eye");
                    var re_password = document.getElementById("p2");
                    var re_eye = document.getElementById("re-eye");
                    var flag = 0;//0两闭，1上开，2下开，3全开
                    eye.onclick = function () {
                        if (flag == 0 || flag == 2) {
                            password.type = "text";
                            eye.src = "images/睁眼睛 .png";//图片换成睁眼的
                            flag++;
                        } else {
                            password.type = "password";
                            eye.src = "images/闭眼睛 .png";//图片换成闭眼的
                            flag--;
                        }
                    }
                    /**/
                    re_eye.onclick = function () {
                        if (flag == 0 || flag == 1) {
                            re_password.type = "text";
                            re_eye.src = "images/睁眼睛 .png";//图片换成睁眼的
                            flag += 2;
                        } else {
                            re_password.type = "password";
                            re_eye.src = "images/闭眼睛 .png";//图片换成闭眼的
                            flag -= 2;
                        }
                    }
                </script>
            </div>
            <div>
                <a id="login"><input id="zhuce" class="loginButton" type="button" value="注册" /></a>
            </div>
        </form>
    </div>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        //昵称
        var nicheng = document.getElementById("nicheng");
        var nicon = document.getElementById("nicon");
        var s5 = 0;
        nicheng.onblur = function () {
            if (this.value.length <= 0) {
                nicon.innerHTML = '昵称不能为空';
                s5 = 0;
            }
            else {
                nicon.innerHTML = '';
                s5 = 1;
            }
        }
        //user
        var s1 = 0;
        var s2 = 0;
        var s3 = 0;
        var s4 = 0;
        var user_right = 0;
        var user = document.getElementById("user");
        var usercon = document.getElementById("usercon");
        user.onblur = function () {
            if (this.value.length <= 0) { usercon.innerHTML = '用户名不能为空'; user_right = 0; s1 = 0; }
            else {
                usercon.innerHTML = '';
                user_right = 1; s1 = 1;
            }
        }
        //mail 
        var mail_right = 0;
        var email = document.getElementById("email");
        var emailcon = document.getElementById("emailcon"); email.onblur = function () {
            if (this.value.length < 8 ||
                this.value.length > 20) {
                emailcon.innerHTML = '邮箱长度错误';
                mail_right = 0;
                s2 = 0;
            }
            else if (!this.value.includes("@")) {
                emailcon.innerHTML = '缺少@';
                mail_right = 0;
                s2 = 0;
            }
            else if (!this.value.includes(".")) {
                emailcon.innerHTML = '缺少.';
                mail_right = 0;
                s2 = 0;
            }
            else if (!this.value.includes("com")) {
                emailcon.innerHTML = '缺少com';
                mail_right = 0;
                s2 = 0;
            }
            else {
                emailcon.innerHTML = '';
                mail_right = 1;
                s2 = 1;
            }
        }
        //password
        var p1_right = 0;
        var p2_right = 0;
        var p1 = document.getElementById("p1");
        var p2 = document.getElementById("p2");
        var pcon1 = document.getElementById("pcon1");
        var pcon2 = document.getElementById("pcon2");
        var pcon3 = document.getElementById("pcon3");
        p1.onblur = function () {
            var num = 0;
            if (p1.value.length < 8 || p1.value.length > 20) {
                pcon1.innerHTML = "请输入密码为8-20位";
                p1_right = 0;
                s3 = 0;
            }
            else {
                if (/\d/.test(p1.value)) {
                    num++;
                }
                if (/[a-z]/.test(p1.value)) {
                    num++;
                }
                if (/[A-Z]/.test(p1.value)) {
                    num++;
                }
                if (/[^a-zA-Z0-9\s]/.test(p1.value)) {
                    num++;
                }
                //pcon3.innerHTML = num;
                if (num < 3) {
                    pcon1.innerHTML = "包含数字、小写字母、大写字母和特殊字符至少三种";
                    p1_right = 0;
                    s3 = 0;
                } else {
                    p1_right = 1;
                    pcon1.innerHTML = ""; s3 = 1;
                }
            }
        }
        p2.onblur = function () {
            if (p1.value != p2.value) {
                pcon2.innerHTML = "两次密码不一样"; p2_right = 0; s4 = 0;
            } else { pcon2.innerHTML = ""; p2_right = 1; s4 = 1; }
        }
        function findNthOccurrence(str, char, n) {
            var count = 0;
            for (var i = 0; i < str.length; i++) {
                if (str[i] === char) {
                    count++;
                    if (count === n) {
                        return i; // 返回第 n 次出现的位置
                    }
                }
            }
            return -1; // 如果找不到第 n 次出现的位置，返回 -1
        }
        var login = document.getElementById("login");
        login.addEventListener("mousedown", function (event) {
            var d = {
                "email": email.value,
                "nickName": nicheng.value,
                "password": p1.value,
                "userName": user.value
            }
            if (s5 == 0) {
                nicon.innerHTML = "昵称不能为空";
                event.preventDefault();
            }
            else if (s1 == 0) {
                usercon.innerHTML = '用户名不能为空';
                event.preventDefault();
            } else if (s2 == 0) {
                emailcon.innerHTML = "请正确输入邮箱";
                event.preventDefault();
            } else if (s3 == 0) {
                pcon1.innerHTML = "请正确设置密码";
                event.preventDefault();
            } else if (s4 == 0) {
                pcon1.innerHTML = "两次密码不一样";
                event.preventDefault();
            } else {
                $.ajax({
                    method: 'post',
                    url: 'http://localhost:7777/user/register',
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(d),
                    success: function (data, status, xhr) {
                        var responseText = xhr.responseText;
                        console.log(responseText);
                        var x1 = findNthOccurrence(responseText, ":", 1);
                        var x2 = findNthOccurrence(responseText, ",", 1);
                        var x3 = findNthOccurrence(responseText, "\"", 5);
                        var x4 = findNthOccurrence(responseText, "\"", 6);
                        if (responseText.includes("200")) {
                            login.href = "login.html";
                            login.click();
                        }
                        else if (responseText.includes("昵称")) {
                            nicon.innerHTML = responseText.substring(x3 + 1, x4);
                            event.preventDefault();
                        }
                        else if (responseText.includes("用户名")) {
                            usercon.innerHTML = responseText.substring(x3 + 1, x4);
                            event.preventDefault();
                        }
                        else if (responseText.includes("邮箱")) {
                            emailcon.innerHTML = responseText.substring(x3 + 1, x4);
                            event.preventDefault();
                        }
                    },
                    error: function (reponse) {
                        usercon.innerHTML = "用户名已存在";
                    }
                })
            }
        }) 
    </script>
</body>

</html>